@import '../theme.color.less';

//登录基座
.muse-login-wrapper {
  background-image: url('../../images/login/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  position: relative;
  
  //logo等
  .company-logo-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    padding: 60px 0 0 60px;
    display: flex;
    .logo-full {
      height: 128px;
      width: auto;
    }
    .company-logo {
      height: 72px;
      width: auto;
    }
    .company-name {
      line-height: 1;
      display: flex;
      align-items: center;
      margin-left: 20px;
      font-size: 36px;
      color: #FFFFFF;
      // background: -webkit-linear-gradient(135deg, #8270f6, #58dafd);
      // background: linear-gradient(135deg, #8270f6, #58dafd);
      // -webkit-background-clip: text;
      // background-clip: text;
      // -webkit-text-fill-color: transparent;
      // color: transparent;
    }
  }
  //登录功能容器
  .muse-login-function-container {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    .strechable-right {
      min-width: 768px;
      height: 100vh;
      width: 40vw;
      justify-content: left;

      display: flex;
      align-items: center;
      .centered-wrapper {
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 24px;
        box-shadow: @xxl-shadow;
        padding: 70px;
        backdrop-filter: blur(4px);
        overflow: hidden;

        //欢迎标题
        .welcome-title {
          width: 420px;
          text-align: center;
          line-height: 1;
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 40px;
          .blue {
            color: @primary-color;
          }
        }
        //登录切换账号密码与考试码的tab
        .login-tab {
          margin-bottom: 20px;
          .login-tab-rail {
            display: flex;
            .tab-content {
              height: 33px;
              margin-right: 36px;
              position: relative;
              cursor: pointer;
              .tab-name {
                height: 18px;
                font-size: 18px;
                line-height: 1;
                color: @gray-color-8;
                font-weight: 600;
                transition: all ease-in-out 0.2s;
              }
              &.current {
                .tab-name {
                  color: @primary-color;
                }
                &::after {
                  background-color: @primary-color;
                }
              }
              &::after {
                content: '';
                bottom: 0px;
                position: absolute;
                display: block;
                height: 4px;
                width: 100%;
                background-color: transparent;
                transition: all ease-in-out 0.2s;
              }
              &:last-of-type {
                margin-right: 0;
              }
            }
          }
        }

        //输入框
        .input-row {
          background-color: #FFF;
          border-radius: 6px;
          border: 2px solid @bodyBg;
          display: flex;
          align-items: center;
          transition: all ease-in-out .2s;
          margin-bottom: 24px;
          overflow: hidden;
          &:last-child {
            margin-bottom: 0;
          }
          &.active {
            border: 2px solid #0C5AFF;
            .user-suggestion-panel {
              border-color: #0C5AFF;
            }
            .prefix {
              color: #0C5AFF;
            }
          }
          .prefix {
            width: 66px;
            color: #CDD5DF;
            transition: all ease-in-out .2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }
          .suffix {
            width: 50px;
            color: #3875F6;
            font-size: 18px;
            transition: all ease-in-out .2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            &.show-plain-text {
              opacity: 0.5;
              color: #CDD5DF;
              cursor: pointer;
              &:hover {
                opacity: 1;
              }
              &.active {
                color: #3875F6;
              }
            }
            //发送验证码
            .acquire-verify-code {
              padding: 8px 6px;
              border-radius: 4px;
              color: #666666;
              background-color: #EEEEEE;
              font-size: 16px;
              line-height: 1;
              cursor: not-allowed;
              &.avalible {
                cursor: pointer;
                color: #3875F6;
                background-color: rgba(56, 117, 246, 0.1);
              }
              &.sent {
                cursor: not-allowed;
              }
            }
          }
          .input {
            position: relative;
            width: calc(420px - 66px - 50px - 4px);
            input {
              width: 100%;
              border: none;
              height: 57px;
              outline: none;
              font-size: 18px;
              color: #2F2F40;
              padding: 0;
              padding-right: 20px;
              &:-webkit-autofill::first-line {
                font-size: 18px !important;
              }
            }
            &.examcode {
              input {
                font-size: 18px;
                &.inputed {
                  font-size: 22px;
                }
              }
            }
            .clear-icon {
              opacity: 0.5;
              position: absolute;
              color: #CDD5DF;
              top: 0;
              right: 0;
              height: 100%;
              display: flex;
              align-items: center;
              cursor: pointer;
              transition: all ease-in-out .2s;
              &:hover {
                opacity: 1;
              }
            }
            &.captcha-wrapper {
              display: flex;
              width: calc(420px - 66px - 4px);
              input {
                flex: 1;
              }
              .slide-verify-wrapper {
                display: inline-flex;
                padding: 2px;
              }
              .get-captcha {
                height: 100%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background-color: var(--muse-primary-color);
                color: var(--muse-white-color-1);
                padding: 0 8px;
                border-radius: 4px;
                font-size: 14px;
                cursor: pointer;
                &:not(.count-down) {
                  transition: all ease-in-out .2s;
                  &:hover,
                  &:focus {
                    background-color: lighten(@primary-color, 15%);
                  }
                }
                &.count-down {
                  color: var(--muse-primary-color);
                  background-color: #FFF;
                }
              }
            }
          }
        }

        //自动登录
        .auto-login {
          padding: 20px 5px 0 5px;
          display: flex;
          align-items: center;
          .check-box-wrapper {
            flex: 1;
          }
          .forget-password {
            font-size: 14px;
            font-weight: normal;
          }
        }

        //登录区域
        .login-button-field {
          width: 100%;

          .login-button {
            margin-top: 32px;
            width: 100%;
            height: 50px;
            background-color: var(--muse-primary-color);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 2px;
            font-size: 18px;
            letter-spacing: 10px;
            transition: all ease-in-out .2s;
            &:hover,
            &:focus {
              background-color: lighten(@primary-color, 15%);
            }
          }
        }

        //注册
        .register-field {
          width: 100%;
          margin-top: 20px;
          display: inline-flex;
          justify-content: center;
          line-height: 1;
          font-size: 14px;
          color: @gray-color-4;
          a {
            color: @primary-color;
          }
        }
      }

    }

  }
}